<template>
  <NvCrud
    v-model:form="form"
    :option
    :data
    @row-save="handleSave"
    @row-update="handleUpdate"
    @row-delete="handleDelete"
  />
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { useMessage } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

interface RowData {
  a: string
  b: string
  c: string
  d: string
  e: string
  f: string
}

const option: NvCrudOption<RowData> = {
  layout: 'simple',
  formWrapper: {
    width: 800,
  },
  fields: {
    a: { title: '字段A', visible: false },
    b: { title: '字段B', formVisible: false, addForm: { formVisible: true } },
    c: { title: '字段C', editForm: { disabled: true } },
    d: { title: '字段D', viewForm: { span: 12 } },
    e: { title: '字段E', viewForm: { span: 12 } },
    f: { title: '字段F' },
  },
}

const data = Array.from({ length: 3 }, (_, i) => ({
  a: `aaa${i + 1}`,
  b: `bbb${i + 1}`,
  c: `ccc${i + 1}`,
  d: `ddd${i + 1}`,
  e: `eee${i + 1}`,
  f: `fff${i + 1}`,
}))

const form = ref<RowData>()
const message = useMessage()
function handleSave(data: RowData, done: (close?: boolean) => void) {
  message.info(`row-save: ${JSON.stringify(data)}`)
  done(true)
}
function handleUpdate(data: RowData, done: (close?: boolean) => void) {
  message.info(`row-update: ${JSON.stringify(data)}`)
  done(true)
}
function handleDelete(data: RowData) {
  message.info(`row-delete: ${JSON.stringify(data)}`)
}
</script>
